<template>
  <div :class="styles['code-scanner-bar']">
    <span :class="styles['label']">{{ props.title }}:</span>
    <el-input
        v-model="scannerCode"
        type="text"
        ref="inputRef"
        auto-complete="off"
        placeholder="点击可手工录入快递单号"
        clearable
        style="width: 260px;"
        @keyup.enter="handleScanner"
        @change="handleScanner"
    />
    <div style="position: relative;">
      <i :class="styles['scanner-icon']" @click="openScanner"/>
      <span :class="styles['tips']">扫描录入</span>
    </div>
  </div>
</template>

<script setup name="CodeScannerBar">
import {defineProps, ref} from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  }
})

const emit = defineEmits(['scanner'])

const inputRef = ref(null)

// 条形码
const scannerCode = ref('')

// 开启扫描抢模式
const openScanner = () => {
  inputRef.value.focus()
}

// 将code码传出去
const handleScanner = () => {
  if (scannerCode.value === '') return
  emit('scanner', scannerCode.value)
  scannerCode.value = '' // 初始化code码
}

</script>

<style module="styles" lang="less" src="./index.less"></style>
